Loading Indicator ব্যবহার
অ্যাপ্লিকেশনে ডায়নামিক কন্টেন্ট লোড করার সময় ব্যবহারকারীদের অপেক্ষা করাতে হয়। এই অপেক্ষার সময় তাদের একটি ভিজ্যুয়াল ইঙ্গিত দেওয়া জরুরি। Framework7 এ Loading Indicator (লোডিং ইন্ডিকেটর) ব্যবহার করে এ কাজ সহজে করা যায়। এটি ব্যবহারকারীদের জানায় যে নতুন কন্টেন্ট লোড হচ্ছে।
Loading Indicator কনফিগারেশন
// লোডিং ইন্ডিকেটর শো করা
app.preloader.show();
// কন্টেন্ট লোড সম্পন্ন হলে লোডিং ইন্ডিকেটর হাইড করা
app.preloader.hide();
এই কোডটি ব্যবহার করে অ্যাসিঙ্ক্রোনাস অপারেশন চলাকালীন ব্যবহারকারীকে একটি স্পিনার বা লোডিং গ্রাফিক দেখাতে পারবেন।
Pull-to-Refresh ব্যবহার
Framework7 এর Pull-to-Refresh (পুল-টু-রিফ্রেশ) ফিচার ব্যবহার করে ব্যবহারকারীরা স্ক্রিনটিকে টানলে (pull) নতুন কন্টেন্ট রিফ্রেশ করতে পারেন। এটি মোবাইল অ্যাপের ক্ষেত্রে খুবই জনপ্রিয় একটি প্যাটার্ন, যা ব্যবহারকারীদের হাতে কন্টেন্ট আপডেটের নিয়ন্ত্রণ দেয়।
Pull-to-Refresh সেটআপ
HTML কোডে ptr-content ক্লাস যোগ করে Pull-to-Refresh সক্রিয় করা যায়:
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Pull to Refresh</div>
</div>
</div>
<div class="page-content ptr-content">
<div class="ptr-preloader">
<div class="preloader"></div>
<div class="ptr-arrow"></div>
</div>
<div id="items-container">
<!-- ডায়নামিক কন্টেন্ট এখানে লোড হবে -->
</div>
</div>
</div>
JavaScript ইভেন্ট হ্যান্ডলার
var $ptrContent = app.$('.ptr-content');
$ptrContent.on('ptr:refresh', function (e) {
// নতুন ডেটা ফেচ করুন (Ajax বা Fetch API ব্যবহার করতে পারেন)
fetch('/api/get-new-items')
.then(response => response.json())
.then(data => {
// প্রাপ্ত ডেটা UI তে যুক্ত করুন
var itemsContainer = app.$('#items-container');
itemsContainer.html(''); // পুরনো কন্টেন্ট মুছে ফেলুন বা ম্যানেজ করুন
data.forEach(item => {
itemsContainer.append('<div class="item">' + item.title + '</div>');
});
// রিফ্রেশ সম্পন্ন হলে Pull-to-Refresh বন্ধ করুন
app.ptr.done();
})
.catch(error => {
console.error(error);
// কোনো ত্রুটি হলে লোডিং শেষ করেও Pull-to-Refresh বন্ধ করুন
app.ptr.done();
});
});
উপরের উদাহরণে ptr:refresh ইভেন্ট ট্রিগার হলে নতুন কন্টেন্ট Ajax বা Fetch API এর মাধ্যমে আনা হয়। ডেটা লোড সম্পন্ন হওয়ার পর UI আপডেট করা হয় এবং শেষমেশ app.ptr.done(); ব্যবহার করে রিফ্রেশ ইন্ডিকেটর বন্ধ করা হয়।
Dynamic Content প্রদর্শন
লোডিং এবং Pull-to-Refresh ব্যবহার করে আপনার অ্যাপ্লিকেশনে ডায়নামিক কন্টেন্ট যুক্ত করা সহজ হয়। যখন ব্যবহারকারী অ্যাপ ওপেন করে বা কোনো নির্দিষ্ট অ্যাকশন নেয়, তখন লোডিং ইন্ডিকেটর শো করে নতুন কন্টেন্ট লোড করতে পারেন। আবার ব্যবহারকারী নিজেই Pull-to-Refresh করে নতুন কন্টেন্ট রিফ্রেশ করতে পারবেন।
প্রধান পদক্ষেপ
- ডেটা লোড হওয়ার সময় লোডার শো করুন।
- ডেটা লোড সম্পন্ন হলে লোডার হাইড করুন।
- Pull-to-Refresh ব্যবহারের মাধ্যমে ব্যবহারকারীদের হাতে কন্টেন্ট আপডেটের ক্ষমতা দিন।
- কন্টেন্ট ডেটা ফেচ করতে Ajax বা Fetch API ব্যবহার করুন।
- পাওয়া ডেটা UI তে যুক্ত করে অ্যাপকে জীবন্ত করুন।
ডার্ক মোড, থিম, রাউটিং সহ Framework7 এর অন্যান্য ফিচারের সাথে লোডিং ও Pull-to-Refresh ব্যবহারে আপনার অ্যাপলিকেশন হয়ে উঠবে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব।
Read more
